<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!--返回错误信息-->
<?php echo validation_errors(); ?>
<!DOCTYPE html>
<html lang="en">

<head>
    <?php
    $title = [
        'title' => '用户列表',
    ];
    $this->load->view('/admin/common/header', $title);
    ?>
</head>

<body data-type="widgets">
<script src="/assets/js/theme.js"></script>
<div class="am-g tpl-g">

<!--    头部   侧边菜单-->
    <?php $this->load->view('/admin/common/bodyLeft'); ?>
    <script type="text/javascript">
    	$(".js-sidebar-nav>li:nth-child(9)>ul").show(80);
    	$(".js-sidebar-nav>li:nth-child(9)>a>span").addClass("sidebar-nav-sub-ico-rotate");
    	$(".js-sidebar-nav>li:nth-child(9)>ul>li:nth-child(1)>a").addClass("active");
    </script>
    <!-- 内容区域 -->
    <div class="tpl-content-wrapper">
        <div class="row-content am-cf">
            <div class="row">
                <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                    <div class="widget am-cf">
                        <div class="widget-head am-cf">
                            <div class="widget-title  am-cf">用户列表</div>


                        </div>
                        <div class="widget-body  am-fr">
                            <form action="/admin/user/remove" id="form_admin" method="post">
                            <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                                <div class="am-u-sm-12 am-u-md-4 ">
                                    <label class=" col-sm-centered am-md-text-right am-u-md-4" for="">用户角色</label>
                                    <div class="am-u-sm-12 am-u-md-8">
                                        <div class="am-form-group tpl-table-list-select">
                                            <select data-am-selected="{btnSize: 'sm',btnWidth: '100%',maxHeight: 200}" id="role" class="choose">
                                                <option value=""></option>
                                                <?php
                                                    foreach ($roleName as $v){
                                                        echo '<option value="'.$v['name'].'" >'.$v['name'].'</option>';
                                                    }
                                                ?>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="am-u-sm-12 am-u-md-4 ">
                                    <label class=" col-sm-centered am-md-text-right am-u-md-4" for="sex">用户性别</label>
                                    <div class="am-u-sm-12 am-u-md-8 ">
                                        <div class="am-form-group tpl-table-list-select">
                                            <select data-am-selected="{btnSize: 'sm',btnWidth: '100%'}" id="sex" class="choose">
                                                <option value=""></option>
                                                <option value="0" >男</option>
                                                <option value="1" >女</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="am-u-sm-12 am-u-md-4 ">
                                    <div class="am-form-group am-input-group am-input-group-sm tpl-form-border-form cl-p">
    <!--                                    <form action="/admin/user/search" method="get">-->
                                        <input type="text" class="am-form-field" name="search" id="searchValue" placeholder="请输入用户姓名">
                                        <span class="am-input-group-btn">
                                            <a href="javascript:;" class="am-btn  am-btn-default am-btn-success tpl-table-list-field am-icon-search" id="search">搜索</a>
                                        </span>
    <!--                                    </form>-->
                                    </div>
                                </div>
                                
                            </div>
                            <div class="am-u-sm-12">
                                <div class="am-form-group">
                                    <div class="am-btn-toolbar">
                                        <div class="am-btn-group am-btn-group-xs">
                                            <a href="/admin/user/addView" class="am-btn am-btn-primary"><span class="am-icon-plus"></span> 新增</a>
                                        </div>
                                        <div class="am-btn-group-xs am-fr">
                                            <a href="javascript:;"  class="am-btn am-btn-danger all-delete"><span class="am-icon-trash"></span> 批量删除</a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="am-u-sm-12">
                                <table width="100%" class="am-table am-table-compact am-table-striped tpl-table-black "
                                       id="example-r">
                                    <thead>
                                    <tr>
                                        <th><input type="checkbox" class="checkall" id="checkallBottom">全选</th>
                                        <th>序号</th>
                                        <th>用户姓名</th>
                                        <th>用户昵称</th>
                                        <th>会员角色</th>
                                        <th>手机号码</th>
                                        <th>添加时间</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody class="choose-box">
                                    <?php
                                    if(isset($list) && !empty($list)){
                                        foreach ($list as $v) {
                                            echo '<tr class="gradeX">
                                            <td>
                                                <label class="am-checkbox-inline">
                                                  <input type="checkbox" value='.$v['id'].' name="del_id[]" class="checkitem">
                                                </label>
                                             </td>
                                             <td>'.$v['id'].'</td>
                                             <td>'.$v['nickname'].'</td>
                                             <td>'.$v['username'].'</td>
                                           <td>'.$v['role_id'].'</td>
                                           <td>'.$v['phone'].'</td>
                                            <td>'.date('Y-m-d',$v['createTime']).'</td>
                                            <td>
                                                <div class="tpl-table-black-operation">
                                                    <a href="/admin/user/editView?id='.$v['id'].'">
                                                        <i class="am-icon-edit"></i> 编辑
                                                    </a>
                                                    <a href="#" class="tpl-table-black-operation-del" data-id="'.$v['id'].'">
                                                        <i class="am-icon-trash"></i> 删除
                                                    </a>
                                                </div>
                                            </td>
                                    </tr>';
                                        }
                                    }else{
                                        echo '';
                                    }

                                    ?>
                                    </tbody>
                                </table>
                            </div>
                            <div class="am-u-lg-12">
                                    <div class="am-u-sm-centered">
                                        <ul class="am-pagination am-pagination-centered" id="paging">

                                    </ul>
                                </div>
                            </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<!-- 模拟confirm -->
<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
  <div class="am-modal-dialog">
    <div class="am-modal-bd">
      确定要删除记录吗？
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-cancel>取消</span>
      <span class="am-modal-btn" data-am-modal-confirm>确定</span>
    </div>
  </div>
</div>

<!-- alert -->
<div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">提示</div>
    <div class="am-modal-bd">
      请选择删除项！
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn">确定</span>
    </div>
  </div>
</div>
<script>
    //批量删除
    $(".all-delete").on("click",function(){
        if(!$(".checkitem:checked").length){
            $("#my-alert").modal();
            return;
        }
        $('#my-confirm').modal({
            onConfirm: function(options) {
                $('#form_admin').submit();
            },
            onCancel: function() {
            }
        });
    });
    //单个删除
    $(document).on("click",".tpl-table-black-operation-del",function(){
        var thisId = $(this).data("id");
        $('#my-confirm').modal({
            onConfirm: function(options) {
                window.location.href = "/admin/user/remove?id=" + thisId;
            },
            onCancel: function() {
            }
        });
    });

    /* 全选 */
    $('.checkall').click(function(){
        $(".checkitem").prop("checked",this.checked);
    });

    var role,
        sex,
        search,
        page;

    $(".choose").on("change",function(){
        role = $("#role").val();
        sex = $("#sex").val();
        search = $("#searchValue").val();
        page = 1;
        chooseUser(sex,role,search,page);
    });

    $("#search").on("click",function(){
        role = $("#role").val();
        sex = $("#sex").val();
        search = $("#searchValue").val();
        page = 1;
        chooseUser(sex,role,search,page);
    });

    function chooseUser (sex,role_id,search,page) {
        $.ajax({
            url:"/api/user/search",
            data:{
                sex: sex,
                role_id: role_id,
                search: search,
                page: page
            },
            dataType:"json",
            type:"GET",
            beforeSend:function(){
                $(".my-dark").css("display","block");
            },
            success:function(msg){
                var data = msg['0'];
                var list = "";
                // console.log(msg);
                if(!data[0]){
                    list += '<tr class="gradeX"><td colspan="8">暂无数据</td></tr>'
                }else{
                    for(var i = 0;i < data.length; i++){
                        
                        list += '<tr class="gradeX">'
                                +'<td>'
                                    + '<label class="am-checkbox-inline">'
                                        + '<input type="checkbox" value="'+ data[i].id +'" name="del_id[]" class="checkitem">'
                                    + '</label>'
                                + '</td>'
                                + '<td>'+ data[i].id +'</td>'
                                + '<td>'+ data[i].nickname +'</td>'
                                + '<td>'+ data[i].username +'</td>'
                                + '<td>'+ data[i].role_id +'</td>'
                                + '<td>'+ data[i].phone +'</td>'
                                + '<td>'+ data[i].createTime +'</td>'
                                + '<td>'
                                    + '<div class="tpl-table-black-operation">'
                                        + '<a href="/admin/user/editView?id='+ data[i].id +'">'
                                            + '<i class="am-icon-edit"></i> 编辑'
                                        + '</a>     '
                                        + '<a href="#" class="tpl-table-black-operation-del" data-id="'+ data[i].id +'">'
                                            + '<i class="am-icon-trash"></i> 删除'
                                        + '</a>'
                                    + '</div>'
                                + '</td>'
                            + '</tr>'
                    }
                }

                $(".choose-box").html(list);

                //分页
                //设置分页信息  
                var pageOptions = {  
                    AllowPaging: true,  
                    PageIndex: msg.this_page,      //设置当前页码  
                    PageSize: msg.pageNum,       //设置分页大小  
                    RecordCount: msg.total_num,  //设置数据总数  
                    // TotalPage: ,      //设置总页数
                    showPageCount: 4,  
                    onPageClick: function(pageIndex) {  
                        chooseUser(sex,role_id,search,pageIndex);

                    }  
                }  
                //初始化分页栏  
                $('#paging').pageBar(pageOptions); 


            },
            complete:function(){
                $(".my-dark").css("display","none");
            },
            error:function(XMLHttpRequest, textStatus, errorThrown){
                console.log(XMLHttpRequest);
                console.log(textStatus);
                console.log(errorThrown);
            }
        });
    }

</script>

<script src="/assets/js/amazeui.min.js"></script>
<script src="/assets/js/amazeui.datatables.min.js"></script>
<script src="/assets/js/dataTables.responsive.min.js"></script>
<script src="/assets/js/app.js"></script>
<script src="/assets/js/page.js"></script>
<script>
    $(document).ready(function() {  
        //设置分页信息  
        var pageOptions = {  
            AllowPaging: true,  
            PageIndex: <?php echo $_GET['page'] ?>,      //设置当前页码  
            PageSize: <?php echo $pageNum ?>,       //设置分页大小  
            RecordCount: <?php echo $totalNum ?>,  //设置数据总数  
            // TotalPage: ,      //设置总页数
            showPageCount: 4,  
            onPageClick: function(pageIndex) {  
                var page = parseInt(pageIndex);
                
                window.location.href = "?page="+ page;
            }  
        }  
        //初始化分页栏
        $('#paging').pageBar(pageOptions);      
    })  
</script>
</body>

</html>